<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="utf-8">
	<title>用户管理</title>
	<meta th:replace="admin/template/head.html"/>
</head>
<body>


<form class="layui-form" action="" id="searchForm">
	<div class="layui-form-item">
		<br>
		<div class="layui-inline">
			<label class="layui-form-label">账号</label>
			<div class="layui-input-inline">
				<input type="text" name="searchAccount" id="searchAccount"  autocomplete="off" class="layui-input">
			</div>
		</div>
		<div class="layui-inline">
			<label class="layui-form-label">名称</label>
			<div class="layui-input-inline">
				<input type="text" name="searchName" id="searchName"  autocomplete="off" class="layui-input">
			</div>
		</div>
		<div class="layui-inline">
			<a  onclick="doSearch()" class="layui-btn layui-btn-radius" >搜索</a>
			<button type="reset" class="layui-btn  layui-btn-radius ">重置</button>
		</div>
	</div>
</form>




<table class="layui-hide" id="webUser" lay-filter="webUser"></table>

<script type="text/html" id="toolbarDemo">
	<div class="layui-btn-container">
		<button class="layui-btn layui-btn-sm" lay-event="add">添加</button>
		<button class="layui-btn layui-btn-sm" lay-event="refresh">刷新数据</button>
	</div>
</script>
<script type="text/html" id="barDemo">
	<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
	<a class="layui-btn layui-btn-xs layui-btn-warm" lay-event="editPwd">修改密码</a>
	<!--<a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">删除</a>-->
</script>

<script type="text/html" id="editWin">
	<div class="layui-form" style="width: 400px; height: auto">
		<div class="layui-form-item layui-hide">
			<br>
			<div class="layui-inline">
				<label class="layui-form-label">id</label>
				<div class="layui-input-inline">
					<input type="text" autocomplete="off" id="id" name="id" class="layui-input" placeholder="请输入名称">
				</div>
			</div>
		</div>
		<div class="layui-form-item">
			<br>
			<div class="layui-inline">
				<label class="layui-form-label">名称</label>
				<div class="layui-input-inline">
					<input type="text" autocomplete="off" id="name" name="name" class="layui-input" placeholder="请输入名称">
				</div>
			</div>
		</div>
		<div class="layui-form-item">
			<div class="layui-inline">
				<label class="layui-form-label">账号</label>
				<div class="layui-input-inline">
					<input type="text" autocomplete="off" name="account" id="account" class="layui-input" placeholder="请输入账号">
				</div>
			</div>
		</div>
		<div class="layui-form-item" id="pwd_div">
			<div class="layui-inline">
				<label class="layui-form-label">密码</label>
				<div class="layui-input-inline">
					<input type="text" autocomplete="off" name="pwd" id="pwd" class="layui-input" placeholder="请输入密码">
				</div>
			</div>
		</div>
	</div>
</script>

</body>
<script th:replace="admin/template/picbox.html"></script>
<script>

	//判断是否是数字或字母
	const isNumberOr_Letter = val=> /^\w+$/.test(val);

	const updatePwd = (data = {})=> {
		layer.prompt({
			formType: 1,
			value: '',
			title: '请输入新密码',
		}, function(value, index, elem){
			if(!value) return parent.layer.msg('请输入账号/密码');
			if(!isNumberOr_Letter(value)) return parent.layer.msg('只能输入字母、数字、下划线');
			if(data.id) {
				$.post('/webUser/updatePwd', {id: data.id, pwd: value}, (res)=> {
					layer.msg(res.msg);
					layer.close(index);
				})
			}
		});
	}

	const editWin = (data = {})=> {
		let html = $('#editWin')[0].innerHTML;
		parent.layer.open({
			type: 1
			,offset: 'auto'
			,title: '用户编辑'
			,content: html
			,area: ['300', '400']
			,btn: ['保存', '关闭']
			,btnAlign: 'c'
			,success: function (layero, index) {
				/* 打开窗口时，判断编辑回显 */
				if(data.id) {
					layero.find('#name').val(data.name);
					layero.find('#account').attr({'value': data.account, 'readonly': true})
					layero.find('#pwd_div').addClass('layui-hide')
				}
			}
			,yes: function (index, layero) {
				let name = layero.find('#name')[0].value,
					account = layero.find('#account')[0].value,
					pwd = layero.find('#pwd')[0].value;
				/* 新增的时候校验账号密码，编辑不允许修改账号密码，所有不验证 */
				if(!data.id) {
					if(!account || !pwd)
						return parent.layer.msg('请输入账号/密码');
					if(!isNumberOr_Letter(account) || !isNumberOr_Letter(pwd))
						return parent.layer.msg('只能输入字母、数字、下划线');
				}
				/* 提交修改 */
				$.post('/webUser/edit', {
					id: data.id,
					name: name,
					account: account,
					pwd: pwd
				}, res=> {
					parent.layer.msg(res.msg);
					if(res.code === 0) parent.layer.close(index);
					// 刷新数据列表
					doSearch();
				})
			}
			,cancel: function () {
				parent.layer.closeAll();
			}
		});
	}


	let $ ,layer,table,form;
	layui.use(['table','form','layer'], function(){
		table=layui.table;
		form = layui.form;
		$=layui.jquery;
		layer=layui.layer;
		table.render({
			elem: '#webUser'
			,url:'/webUser/list'
			,toolbar: '#toolbarDemo'
			,title: '用户数据表'
			,totalRow: true
			,cols: [
				[
					{type: 'checkbox', fixed: 'left'}
					,{field:'id', title:'ID', width:80, fixed: 'left', unresize: true, sort: true}
					,{field:'name', title:'名称'}
					,{field:'account', title:'账号'}
					,{field:'createTime', title:'创建时间'}
					,{fixed: 'right', title:'操作', toolbar: '#barDemo', width: 260}
				]
			]
			,page: true
			,limit: 10
			,limits: [10,50,80]
			,id:'webUserTable',
            done:function(){
                console.log('表格渲染完成');
                lightbox();//绑定相册插件
            }
		});

		//工具栏事件
		table.on('toolbar(webUser)', function(obj){
			let checkStatus = table.checkStatus(obj.config.id);
			let data = checkStatus.data;
			switch(obj.event){
				case 'refresh':
					doSearch();
					break;
				case 'add':
					editWin();
					break;
			};
		});

		//工具条事件
		table.on('tool(webUser)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
			let id = obj.data.id; //获得当前行数据
			let layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
			if(layEvent === 'del'){ //删除
				layer.confirm('真的删除用户与所有关联吗？', function(index){
					obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
					layer.close(index);
					//向服务端发送删除指令
					$.get("/webUser/delete", {id: id},  res=> {
						layer.msg(res.msg);
					});
				});
			} else if(layEvent === 'edit'){ //编辑
				editWin(obj.data);
			} else if(layEvent === 'editPwd') {
				updatePwd(obj.data);
			}
		});

	});

	function doSearch() {
		//通过jquery获取参数的值
		let account = $("#searchAccount").val();
		let name = $("#searchName").val();
		table.reload('webUserTable', {
			where: {
				name: name,
				account: account
			},page: {
				curr:1
			}
		});

	}



</script>


</html>